<template>
  <a-modal
    id="testflow123"
    :open="open"
    @update:open="$emit('update:open', $event)"
    title="预览XML"
    :footer="null"
    :width="800"
    :bodyStyle="{ height: '600px', padding: '0' }"
    @cancel="$emit('update:open', false)"
    @ok="handleConfirm"
  >
    <div ref="editorContainer" style="height: 100%; width: 100%;" class="editor-container">
      <div ref="editorRef"></div>
    </div>
  </a-modal>
</template>

<script>
import { basicSetup, EditorView} from "codemirror"
import { EditorState, Compartment } from "@codemirror/state"
import { xml } from "@codemirror/lang-xml"
import { shallowRef, toRaw, watch, nextTick } from "vue"

export default {
  name: 'XmlEditor',
  props: {
    open: {
      type: Boolean,
      required: true
    },
    code: {
      type: String,
      required: true
    }
  },
  emits: ['update:open', 'confirm'],
  setup(props, { emit }) {
    let language = new Compartment
    let tabSize = new Compartment
    const editorRef = shallowRef()
    const state = shallowRef()
    const view = shallowRef()
    const editorContainer = shallowRef()

    // 监听 open 变化来初始化编辑器
    watch(() => props.open, (newVal) => {
      if (newVal) {
        // 使用nextTick确保DOM已经更新
        nextTick(() => {
          initEditor()
        })
      }
    })

    // 监听 code 变化来更新编辑器内容
    watch(() => props.code, (newVal) => {
      if (view.value) {
        view.value.dispatch({
          changes: {
            from: 0,
            to: view.value.state.doc.length,
            insert: newVal
          }
        })
      }
    })

    function initEditor() {
      if(view.value) {
        view.value.destroy()
      }

      // 确保有父容器
      if (!editorRef.value) {
        return
      }

      state.value = EditorState.create({
        doc: props.code,
        extensions: [
          EditorView.editable.of(true),
          basicSetup,
          language.of(xml()),
          tabSize.of(EditorState.tabSize.of(4))
        ]
      })

      view.value = new EditorView({
        state: toRaw(state.value),
        parent: editorRef.value
      })

      if (!editorContainer.value) {
        return
      }

      const resizeObserver = new ResizeObserver(entries => {
        if (!view.value) {
          return
        }
        for (const entry of entries) {
          const { height } = entry.contentRect;
          view.value.dom.style.height = `${height}px`;
          view.value.requestMeasure();
        }
      });
      resizeObserver.observe(editorContainer.value)
    }

    function handleConfirm() {
      console.log("确认按钮被点击")
      emit('confirm', view.value?.state?.doc?.toString())
    }

    return {
      editorRef,
      editorContainer,
      handleConfirm
    }
  }
}
</script>

<style scoped>
.editor-container ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.editor-container ::-webkit-scrollbar-track {
  background: transparent;
}

.editor-container ::-webkit-scrollbar-thumb {
  background: #bfc6d2;
  border-radius: 3px;
}

.editor-container ::-webkit-scrollbar-thumb:hover {
  background: #6e85ad;
  cursor: pointer;
}
</style>
